<template>
  <div
    id="wheel_div"
    ref="wheel_div"
  >
    <canvas
      id="myCanvas"
      width="1650"
      height="985"
    ></canvas>
    <FabricView
      :data="item"
      v-for="item of dataList"
      :key="item.id"
    ></FabricView>
  </div>
</template>

<script>
import FabricView from "./Fabric.vue";
import { fabric } from "fabric";
export default {
  components: {
    FabricView,
  },
  data() {
    // 这里存放数据
    return {
      dataList: [
        {
          id: "LBS-1",
          name: "负载均衡服务器LBS-1",
          Internet: "39.99.165.58",
          intranet: "172.26.137.195",
          status: "normal",
          x: 400,
          y: 25,
        },
        {
          id: "LBS-2",
          name: "负载均衡服务器LBS-2",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 900,
          y: 25,
        },
        {
          id: "port",
          name: "门户服务器PORT",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 400,
          y: 180,
        },
        {
          id: "API",
          name: "网关服务器API",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 900,
          y: 180,
        },
        {
          id: "IFS",
          name: "基础设施服务器IFS",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 650,
          y: 320,
        },
        {
          id: "BUS-1",
          name: "业务服务器BUS-1",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 25,
          y: 480,
        },
        {
          id: "BUS-2",
          name: "业务服务器BUS-2",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 225,
          y: 480,
        },
        {
          id: "BUS-3",
          name: "业务服务器BUS-3",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 425,
          y: 480,
        },
        {
          id: "BUS-4",
          name: "业务服务器BUS-4",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 625,
          y: 480,
        },
        {
          id: "BUS-5",
          name: "业务服务器BUS-5",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 825,
          y: 480,
        },
        {
          id: "BUS-6",
          name: "业务服务器BUS-6",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 100,
          y: 650,
        },
        {
          id: "BUS-7",
          name: "业务服务器BUS-7",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 500,
          y: 650,
        },
        {
          id: "BUS-8",
          name: "业务服务器BUS-8",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 735,
          y: 650,
        },
        {
          id: "BUS-9",
          name: "业务服务器BUS-9",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 950,
          y: 650,
        },
        {
          id: "BUS-10",
          name: "业务服务器BUS-10",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 25,
          y: 820,
        },
        {
          id: "BUS-11",
          name: "业务服务器BUS-11",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 225,
          y: 820,
        },
        {
          id: "BUS-12",
          name: "业务服务器BUS-12",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 425,
          y: 820,
        },
        {
          id: "BUS-13",
          name: "业务服务器BUS-13",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 625,
          y: 820,
        },
        {
          id: "BUS-14",
          name: "业务服务器BUS-14",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 825,
          y: 820,
        },
        {
          id: "BUS-15",
          name: "业务服务器BUS-15",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 1025,
          y: 820,
        },
        {
          id: "CMS-1",
          name: "管理服务器BUS-1",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 1450,
          y: 480,
        },
        {
          id: "CMS-2",
          name: "管理服务器BUS-2",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 1450,
          y: 650,
        },
        {
          id: "CMS-3",
          name: "管理服务器BUS-3",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 1450,
          y: 820,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.initContainer();
    });
  },
  methods: {
    initContainer() {
      // 初始化
      // let rect = document.getElementById("wheel_div").getBoundingClientRect();
      // // console.log("rect: ", rect);
      // document.getElementById("myCanvas").setAttribute("width", rect.width);
      // document.getElementById("myCanvas").setAttribute("height", rect.height);
      var canvas = new fabric.Canvas("myCanvas");
      let rect = this.drawRect({
          left: 10,
          top: 460,
          width: 1300,
          height: 500,
        }),
        rect2 = this.drawRect({
          left: 1350,
          top: 460,
          width: 280,
          height: 500,
        }),
        rect_bus = this.drawRect({
          left: 1250,
          top: 460,
          width: 60,
          height: 500,
        }),
        rect_cms = this.drawRect({
          left: 1350,
          top: 460,
          width: 60,
          height: 500,
        });
      let str = "业务服务器集群",
        str2 = "管理服务器集群";
      for (let item = 0; item < str.length; item++) {
        let textPath = this.makeText(str[item], {
          top: 550 + item * 36,
          left: 1270,
        });
        canvas.add(textPath);
      }
      for (let item = 0; item < str2.length; item++) {
        let textPath = this.makeText(str2[item], {
          top: 550 + item * 36,
          left: 1370,
        });
        canvas.add(textPath);
      }
      canvas.add(rect);
      canvas.add(rect2);
      canvas.add(rect_bus);
      canvas.add(rect_cms);
      let lineData = [
        [525, 115, 935, 115], //横 负载均衡右
        [730, 115, 730, 215], //竖 负载均衡右
        [560, 215, 930, 215], //横 门户服务器右
        [480, 310, 980, 310], //横 基础设施上
        [480, 290, 480, 310], //折 门户服务器下
        [980, 290, 980, 310], //折 网关服务器下
        [730, 310, 730, 320], //折 基础设施上
        [730, 430, 730, 450], //折 基础设施下
        [395, 450, 1425, 450], //横 基础设施下
        [395, 450, 395, 865], //竖 业务服务器2右
        [1425, 450, 1425, 910], //竖 管理服务器1 左
        [1425, 570, 1480, 570], //折  管理服务器1 左
        [1425, 740, 1480, 740], //折  管理服务器2 左
        [1425, 910, 1480, 910], //折  管理服务器3 左
        [110, 525, 900, 525], //横 业务服务器2中
        [180, 695, 1030, 695], //横 业务服务器6中
        [110, 865, 1100, 865], //横 业务服务器11中
      ];
      for (let item of lineData) {
        let line = this.makeLine(item);
        canvas.add(line);
      }
    },
    drawRect(data) {
      //绘制矩形边框
      return new fabric.Rect({
        left: data.left,
        top: data.top,
        fill: "rgba(75, 138, 215, 0.2)",
        stroke: "#00A5C3",
        strokeWith: 2,
        strokeDashArray: ["#00A5C3", "#624CBB", "#3263C7", "#00A5C3"],
        width: data.width,
        height: data.height,
        rx: 8,
        ry: 8,
      });
    },
    makeText(str, data) {
      //绘制文件标题
      return new fabric.Text(str, {
        top: data.top,
        left: data.left,
        fill: "#ffffff",
        fontSize: 24,
      });
    },
    makeLine(coords) {
      // 绘制线段连线路径
      return new fabric.Line(coords, {
        stroke: "#4B8AD7",
        strokeWidth: 1,
        selectable: false,
        evented: false,
      });
    },
  },
};
</script>

<style lang='less' scoped>
#wheel_div {
  position: relative;
  width: 1650px;
  height: 984px;
  margin: 1%;
  border: 1px solid #3368b8;
  border-radius: 5px;
  text-align: center;
  color: #ffffff;
}
#myCanvas {
  z-index: 1;
}
</style>